<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
<title>注册页</title>    
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/jquery/jquery-ui.css" />    
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/common.css" />
<script type="text/javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/jquery-1.8.2.js"></script>    
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/jquery-ui.js"></script>     
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/mydatepicker.js"></script>    
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery/jquery.ui.datepicker-zh-CN.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/msgConstants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/honeycombtool.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/regist_login.js"></script>
</head>

<script type="text/javascript">
	$(document).ready(function() {
		var dateInput = $('#userRegistBirthday');
		loadDatepicker(dateInput);
		initMapContainer();
	});
	
	function initMapContainer() {
		// 创建地图实例  
        var mapObj = new AMap.Map("container", {
        	level: 14, //地图初始化时的视野级别
        	center: new AMap.LngLat(104.0659225, 30.6574893), //地图初始化时的中心点经纬度坐标
        	zooms : [3,19], //地图视野级别范围，如：[3,19]，3 为最小级别，19 为最大级别
        	dragEnable : true, //定义地图是否可以拖拽
        	zoomEnable : true, //定义地图视野级别是否可以更改
        	keyboardEnable : true, //定义地图是否可以被键盘控制
        	jogEnable: true, //定义地图拖拽时是否支持缓动效果
        	continuousZoomEnable: true, //定义地图是否有连续缩放效果
        	doubleClickZoom : true, //定义地图是否可以双击放大
        	scrollWheel: true //定义地图是否支持鼠标滚轮缩放
        });
		// 加载工具条  
        mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"], function() {  
			tool = new AMap.ToolBar({
				direction: false, // 隐藏方向导航
				ruler: false, // 隐藏视野级别控制尺
				autoPosition: false, // 禁止自动定位
				offset: {x: -10, y: 3}
			});
			mapObj.addControl(tool);
//				加载比例尺
			scale = new AMap.Scale();
			mapObj.addControl(scale); 
		});
		
		
		mapObj.bind(mapObj,"click",function(e){  
			var marker = new AMap.Marker({  
				id:"myLocation",  
				position:e.lnglat,  
			    icon:"http://api.amap.com/webapi/static/Images/marker_sprite.png",
				offset:{x:-8,y:-34}  
			});  
			mapObj.addOverlays(marker);  

			var lnglatXY = e.lnglat;
			var geo = new AMap.Geocoder({ 
				range:100,//范围 
				crossnum:1,//道路交叉口数 
				roadnum :1,//路线记录数 
				poinum:1//POI点数 
			}); 
			geo.regeocode(lnglatXY,function(data){  
		        var resultStr="";  
		        if(data.status =="E0") {  
		            for(var i=0;i<data.list.length;i++){
		                resultStr += data.list[i].province.name+data.list[i].city.name+data.list[i].district.name; 
	                    for(var j=0;j<data.list[i].roadlist.length;j++){  
	                        resultStr+= data.list[i].roadlist[j].name;  
	                    }  
		            }  
		        } else if(data.status =="E1") {  
		             resultStr = "未查找到任何结果!";     
		        } else {  
		             resultStr= "错误信息："+data.state;  
		        }  
		        $('#map_addr').val(resultStr);
		        $('#map_desc').val(resultStr);
		    });         
	        $('#map_x').val(lnglatXY.lng);
	        $('#map_y').val(lnglatXY.lat);
		});
	}
</script>

<body>
<%@ include file="top.jsp" %>
	<div style="width: 980px;height: auto;overflow: hidden;margin: 0 auto;border: 1px solid gray;">
	<form action="<%=request.getContextPath() %>/doLogin.action" method="post" onsubmit="return checkLoginInfo()">
		<div style="float: left;width: 250px;height: 400px;border: 1px solid gray;">
			<div style="float: left;width: 248px;height: 50px;line-height: 50px;text-align: center;background-color: #CCCCCC;">
				快速登录
			</div>
			<div style="float: left;width: 248px;height: 40px;line-height: 40px;border-top: 1px dashed gray;">
				登录邮箱：<input id="userLoginEmail" name="userLoginEmail" onblur="checkUserLoginEmail()" type="text">
			</div>
			<div id="userLoginEmailError" style="float: left;width: 248px;height: 20px;line-height: 20px;border-bottom: 1px dashed gray;">
			
			</div>
			<div style="float: left;width: 248px;height: 40px;line-height: 40px;border-top: 1px dashed gray;">
				登录密码：<input id="userLoginPassword" name="userLoginPassword" onblur="checkUserLoginPassword()" type="password">
			</div>
			<div id="userLoginPasswordError" style="float: left;width: 248px;height: 20px;line-height: 20px;border-bottom: 1px dashed gray;">
			
			</div>
			<div style="float: left;width: 248px;height: 40px;line-height: 40px;border-bottom: 1px dashed gray;">
				<input type="submit" value="登录">
			</div>
		</div>
	</form>
	
	<form action="<%=request.getContextPath() %>/doRegist.action" method="post" onsubmit="return checkRegistInfo()" >
		<div style="float: left;margin-left: 5px;width: 720px;height: auto;overflow: hidden;border: 1px solid gray;">
			<div style="width: 100%;height: 120px;line-height: 120px;text-align: center;background-color: #80FF80;">
				欢迎注册HoneyComb
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				<div style="float: left;width: 250px;height: 100%;">
					登录邮箱：<input id="userRegistEmail" name="userRegistEmail" onblur="checkUserRegistEmail()" type="text">
				</div>
				<div id="userRegistEmailError" style="float: left;width: 440px;height: 100%;font-size: 12px;">
					
				</div>
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				<div style="float: left;width: 250px;height: 100%;">
					显示昵称：<input id="userRegistNickname" name="userRegistNickname" onblur="checkUserRegistNickname()" type="text">
				</div>
				<div id="userRegistNicknameError" style="float: left;width: 440px;height: 100%;font-size: 12px;">
					
				</div>
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				<div style="float: left;width: 250px;height: 100%;">
					登录密码：<input id="userRegistPassword" name="userRegistPassword" onblur="checkUserRegistPassword()" type="password">
				</div>
				<div id="userRegistPasswordError" style="float: left;width: 440px;height: 100%;font-size: 12px;">
					
				</div>
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				<div style="float: left;width: 250px;height: 100%;">
					确认密码：<input id="userReRegistPassword" name="userReRegistPassword" onblur="checkUserReRegistPassword()" type="password">
				</div>
				<div id="userReRegistPasswordError" style="float: left;width: 440px;height: 100%;font-size: 12px;">
					
				</div>
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				选择性别：<input name="userRegistSex" type="radio" value="male" checked="checked">♂
						<input name="userRegistSex" type="radio" value="female">♀
			</div>
			<div style="width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				您的生日：<input id="userRegistBirthday" name="userRegistBirthday" onblur="checkUserRegistBirthday()" value="请点击输入框选择..." type="text" />
			</div>
			<div style="width: 100%;height: 300px;border-bottom: 1px dashed gray;">
				<div style="float: left;width: 80px;height: 100%;">
					注册位置：<br><br>
					(注册位置有助于我们帮助您筛选适合您的信息)
				</div>
				<div id="container" style="float: left;margin-left: 10px;width: 300px;height: 300px;border: 1px solid #CCCCCC;">
					
				</div>
			    <div style="width: 100%;height: auto;display: none;">
			    	经度：<input type="text" name="mapX" id="map_x"/><br />
			    	纬度：<input type="text" name="mapY" id="map_y"/><br />
			    	街道：<input type="text" name="mapAddr" id="map_addr" size="30"/><br /> 
			    	描述：<input type="text" name="mapDesc" id="map_desc" size="30"/><br /> 
			    	地图提供商：<input type="text" name="mapProvider" id="map_provider" value="amap"/><br /> 
			    	地图类型：<input type="text" name="mapType" id="map_type" value="1"/>Type Of User<br /> 
   				</div>
			</div>
			<div class="margin_20"></div>
			<div style="float: left;width: 100%;height: 50px;line-height: 50px;text-align: left;border-bottom: 1px dashed gray;">
				<input type="submit" value="立即注册">我有账号,<a href="<%=request.getContextPath() %>/login.action">去登录.</a>
			</div>
		</div>
	</form>
	
	</div>
<%@ include file="foot.jsp" %>
</body>
</html>